<style scoped>
.el-card {
  margin-bottom: 15px;

  .card-header {
    span {
      line-height: 32px;
    }

    display: flex;
    justify-content: space-between;
  }
}

.warp {
  display: flex;
  flex-wrap: wrap;

  p {
    padding: 4px;
    margin: 0 6px 6px 0;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
  }

  .this {
    color: #67c23a;
    background: #f0f9eb;
  }
}
</style>
<template>
  <el-affix :offset="0">
    <el-menu mode="horizontal" :ellipsis="false">
      <el-menu-item>
        <el-button type="primary" @click="clearSearch" plain>LeeSsang's Blog</el-button>
      </el-menu-item>
      <el-menu-item style="margin-right: auto;">
        <el-button type="primary" plain @click="dialogVisible = true">网站收集</el-button>
      </el-menu-item>
      <el-menu-item>
        <el-input v-model="input" placeholder="请输入关键词搜索" @keydown.enter="handleEnter" @blur="handleEnter" clearable
          @clear="blog.search = ''" />
      </el-menu-item>
      <el-menu-item v-if="token">
        <el-button type="success" plain @click="router.push('/new')">新博客</el-button>
      </el-menu-item>
      <el-menu-item>
        <el-button v-if="token" type="primary" plain @click="logout">退出</el-button>
        <el-button v-else type="primary" plain @click="open">登录</el-button>
      </el-menu-item>
    </el-menu>
  </el-affix>
  <div class="container">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>分类</span>
              <el-button v-if="token" type="primary" plain
                @click="addDialog = true; genreMark.type = 'genre'">新增分类</el-button>
            </div>
          </template>
          <div class="warp">
            <p v-for="item in genreList" :key="item.id" :class="{ this: item.id == blog.genre_id }"
              @click="handleGenre(item.id, item.title)">{{
                item.title }}({{
                item.blog_count
              }})</p>
          </div>
        </el-card>
        <el-card>
          <template #header>
            <div class="card-header">
              <span>标签</span>
              <el-button v-if="token" type="primary" plain
                @click="addDialog = true; genreMark.type = 'mark'">新增标签</el-button>
            </div>
          </template>
          <div class="warp">
            <p v-for="item in markList" :key="item.id" :class="{ this: item.id == blog.mark_id }"
              @click="handleMark(item.id, item.title)">{{ item.title }}({{
                item.blog_count
              }})</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="20">
        <RouterView />
      </el-col>
    </el-row>
  </div>
  <el-dialog v-model="dialogVisible" :fullscreen="true" :show-close="false">
    <template #header>
      <el-page-header @back="dialogVisible = false">
        <template #content>
          <span class="text-large font-600 mr-3"> 网站列表展示 </span>
        </template>
      </el-page-header>
    </template>
    <WebsiteIndex />
  </el-dialog>
  <el-dialog v-model="addDialog" :title="genreMark.type == 'genre' ? '新增分类' : '新增标签'" width="500">
    <el-form>
      <el-input v-model="genreMark.title" autocomplete="off" />
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="subDialog">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
// 引入依赖
import axios from '@/api/index';
import { onMounted, ref } from 'vue';
import { useBlogStore } from './stores/blog';
import router from '@/router';
import { ElMessage, ElMessageBox } from 'element-plus'

// 引入组件
import WebsiteIndex from './components/WebsiteIndex.vue';

// 判断登录状态
const token = ref(localStorage.getItem('token'));

// 登录
const open = () => {
  ElMessageBox.prompt('请输入密码', '提示', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputType: 'password'
  }).then(({ value }) => {
    axios.post('/login', { password: value }).then((res) => {
      if (res.code == 200) {
        localStorage.setItem('token', res.data);
        ElMessage({
          type: 'success',
          message: res.msg
        });
        setTimeout(() => {
          location.reload();
        }, 500);
      } else {
        ElMessage({
          type: 'error',
          message: res.msg
        })
      }
    })
  })
}
const logout = () => {
  localStorage.removeItem('token');
  location.reload();
}

// 网站列表展示
const dialogVisible = ref(false)

// 添加标签和分类
const addDialog = ref(false);
const genreMark = ref({
  title: '',
  type: ''
});
const subDialog = () => {
  axios.post('/blog/genre-mark', genreMark.value).then((res) => {
    if (res.code == 200) {
      addDialog.value = false;
      genreMark.value.title = '';
      getGenreMark();
    }
  })
}

//清除搜索
const clearSearch = () => {
  blog.search = '';
  blog.search_title = '全部';
  blog.genre_id = null;
  blog.mark_id = null;
  router.push('/')
}

// 搜索切换
const blog = useBlogStore();
const input = ref('');
const handleEnter = () => {
  if (input.value.trim() !== '') {
    blog.search = input.value;
    blog.search_title = input.value;
    blog.genre_id = null;
    blog.mark_id = null;
    router.push('/')
  }
};
const handleGenre = (id, title) => {
  blog.genre_id = id;
  blog.search_title = title;
  blog.mark_id = null;
  blog.search = null;
  input.value = null;
  router.push('/')
}
const handleMark = (id, title) => {
  blog.genre_id = null;
  blog.mark_id = id;
  blog.search_title = title;
  blog.search = null;
  input.value = null;
  router.push('/')
}
const genreList = ref([]);
const markList = ref([]);
const getGenreMark = () => {
  axios.get('/blog/index').then((res) => {
    if (res.code == 200) {
      let data = res.data;
      genreList.value = data.genre;
      blog.genres = data.genre;
      markList.value = data.mark;
      blog.marks = data.mark;
    }
  })
}
onMounted(() => {
  getGenreMark();
})

</script>